<template>
  <div class="BarChart" :id="id" :style="styles" v-if="data"></div>
</template>
<script>
import { getDetailsCount, countProvince } from '@/api/echarts'
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')
require('echarts/lib/component/legend')
require('echarts/lib/chart/bar')

export default {
  name: 'BarChart',
  props: {
    id: {
      type: String,
      default: 'BarChart'
    },
    height: {
      type: String,
      default: '100%'
    },
    width: {
      type: String,
      default: '100%'
    },
    chartData: Array
  },
  data() {
    return {
      styles: {
        height: this.height,
        width: this.width
      },
      conturysList: [],
      deathList: [],
      conList: [],
      cureList: [],
      topTen: [],
      data: []
    }
  },
  created() {
    countProvince().then(res => {
      if (res.code == 200) {
        this.$nextTick(() => {
          this.data = res.data
          this.draw(res.data)
        })
      }
    })
  },
  methods: {
    initData() {
      this.chartData = this.chartData.reverse(this.chartData.sort(this.compare('conNum')))
      this.topTen = this.chartData.slice(0, 10)
      this.topTen.forEach(item => {
        this.conList.push(item['conNum'])
        this.deathList.push(item['deathNum'])
        this.cureList.push(item['cureNum'])
        this.conturysList.push(item['name'])
      })
    },
    compare(property) {
      return function (a, b) {
        return a[property] - b[property]
      }
    },
    draw(data) {
      // this.initData()
      let provinceData = []
      let countData = []
      if (data) {
        data.map(item => {
          provinceData.push(item.province)
          countData.push(item.count)
        })
      }
      var chartDom = document.getElementById(this.id)
      var myChart = echarts.init(chartDom)
      var option = {
        title: {
          text: '各省份确诊人数排行',
          left: 'center',
          textStyle: {
            color: '#fff',
            textBorderWidth: '2',
            fontSize: 20
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        color: ['#ee44ee', '#8555a8', '#d984f3'],
        legend: {
          show: false,
          top: 'bottom',
          textStyle: {
            color: '#d984f3'
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          show: false,
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: provinceData,
          inverse: true,
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            name: '确诊总数',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: countData
          },
          {
            name: '死亡总数',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: this.deathList
          },
          {
            name: '治愈总数',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            data: this.cureList
          }
        ]
      }
      option && myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="less" >
</style>
